<template>
  <div class="home">
    <div class="home_background" :style="{'background-image':`url(${config.IndexImage})`}"></div>

    <el-dialog
      :visible.sync="dialogFormVisible"
       width="40%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
    <div class="home_login_content">
      <div class="login_form">
        <div class="login_main">
              <div class="login_title" v-t="'message.login.findPsw'"></div>
              <el-form ref="ruleForm" :label-position="labelPosition" label-width="80px" :model="form" size="large" :rules="rules">
                <el-row :gutter="10">


                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="upwd" :label="$t('message.nat.xmm')" required>
                      <el-input v-model="form.upwd" type="password" :placeholder="$t('message.plsInput',{name:$t('message.nat.xmm')})"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :xs="12" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item  prop="confirmpassword" :label="$t('message.nat.qrxmm')" required>
                        <el-input prefix-icon="el-icon-lock" type="password" v-model="form.confirmpassword" :placeholder="$t('message.plsInput',{name:$t('message.nat.qrxmm')})"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align:center">
                    <el-button size="small" @click="goBack">{{$t('message.btnBack')}}</el-button>
                    <el-button size="small" type="primary"  @click="onSubmit">{{$t('message.btnConfirm')}}</el-button>
                </div>
              </el-form>
            </div>

      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import config from '@/baseconfig.js'
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  computed:{
    config(){
      return config
    }
  },
  data() {
    var passConfirm = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(this.$t('message.cantEmpty')));
        }else{
          if(value !== this.form.upwd){
            return callback(new Error(this.$t('message.nat.mmbyz')));
          }else{
            callback()
          }
        }
    };
    var passWord = (rule,value,callback) => {
      var rules = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/;
      if (!value) {
          return callback(new Error(this.$t('message.cantEmpty')));
      }else{
        if(!rules.test(value)){
          return callback(new Error(this.$t('message.passwordTips')));
        }else{
          callback()
        }
      }
    };
    return {
      dialogFormVisible:false,
      labelPosition:'top',
      loading:true,
      form: {
        id:"",
        upwd:"",
        confirmpassword:"",
        sign:""
      },
      codeImg:"",
      noticeList:[],
      selectList:[],
      rules: {
        upwd: [
          { required: true, message: this.$t('message.cantEmpty'), trigger: "change" },
          { validator: passWord, trigger: 'blur' },
        ],
        confirmpassword:[
          { required: true, message: this.$t('message.cantEmpty'), trigger: "change" },
          {validator: passConfirm,trigger:'blur'}
        ]
      },
    };
  },
  mounted() {

  },
  created(){
    //this.getAttribute()
    let params = this.$route.params;
    this.$api.post('/common/invalidEmail',{...params}).then(res=>{
      this.dialogFormVisible=true;
      this.form.id = res.id;
      this.form.sign = res.sign;
      //this.loading = false;
    }).catch(e=>{})
  },
  methods: {
    goBack(){
      this.$router.push({name:'login'})
    },

    onSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$api
            .post("/common/resetPwd", {...this.form})
            .then((res) => {
              this.loading = false;
              this.$alert(this.$t('message.login.xgmmcg'), this.$t('message.nat.czcg'), {
                confirmButtonText: this.$t('message.btnConfirm'),
                type:'success',
                closeOnClickModal:false,
                callback: action => {
                  this.$router.replace({name:'login'})
                }
              });
            })
            .catch((e) => {this.loading = false;this.getCode()});
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.home
  display flex
  align-items: center
  justify-content: center
  min-height calc(100vh - 126px)
  .home_background
    position:absolute
    top 0
    bottom 0
    left 0
    right 0
    background-size cover
    background-position center
    background-repeat no-repeat
  .home_login_content
    position: relative

    .login_form
      margin 0 auto
      padding 20px 30px 20px 30px
      background-color rgba(255, 255, 255, 0.9)
      border-radius 20px
      width 480px
      .login_main
        padding 0 30px 0 20px
        box-sizing border-box
        .code_info
          position absolute
          right 0
          top 0
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
          margin-bottom 20px
        >>>.el-button
          width 100px
        >>>.el-select
          display block
        >>>.el-form--label-top .el-form-item__label
          padding 0
          font-weight 600
        .link
          display block
          text-align center
          height $titleSize
          line-height $titleSize
          color $darkblack
      .login_meg
        width 500px
        .login_title
          font-size 26px
          color $colorDeepPrimary
          text-align center
          padding 10px 0
  .el-dialog
    background transparent


</style>
